<template>
    <div class="ToPrint">
        <div class="content" >
            <div class="order" >
                <h1>订单信息</h1>
                <ul>
                    <li>用户名</li>
                    <li v-text="username" />
                    <li>创建时间</li>
                    <li v-text="create" />
                </ul>
                <h1>收货地址信息</h1>
                <ul>
                    <li>收货人</li>
                    <li v-text="address.name" ></li>
                    <li>电话</li>
                    <li v-text="address.tel" ></li>
                    <li>地址</li>
                    <li v-text="address.address" ></li>
                </ul>
            </div>
            <div class="order_detail">
                <h1>图书详情</h1>
                <table>
                    <tr>
                        <th v-for="(word, key) in cols" :key="key" v-text="word" />
                    </tr>
                    <tr v-for="(item,index) in details" :key="index">
                        <td v-for="key in Object.keys(cols)" :key="key" v-text="item[key]" />
                    </tr>
                </table>
            </div>
            <div class="footer" >
                签名：
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
        },
        created(){
            this.$axios.get('/address/id', {params:{id:this.$route.params.address}}).then(res => {
                if (res.data.code === 200) {
                    this.address = res.data.content;
                } else {
                    window.alert('地址列表初始化异常，请刷新再试');
                }
            });
        },
        data(){
            let tmpCreate = new Date (this.$route.params.create);
            return{
                cols: {book_index: '索取号', book_name: '图书名称', book_publish: '出版社', book_editor: '作者', status: '订单状态'},
                username:this.$route.params.username,
                create:tmpCreate.toLocaleString(),
                details:this.$route.params.details,
                address:''
            }
        }
    };
</script>
<style scoped lang="scss" >
    @import 'ToPrint';
</style>
